<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2/21/14
  Time: 8:51 PM
  To change this template use File | Settings | File Templates.
--%>
<%@ page import="grails.converters.JSON; com.wings4.school.academicconfiguration.AcademicYear"%>
<%@ page contentType="text/html;charset=UTF-8" %>
<g:applyLayout name="apps">
<head>

    <link rel="stylesheet" href="${resource(plugin: 'extjs', file: 'ext/resources/css/ext-all.css')}"/>
    <script src="${resource(plugin: 'extjs', file: 'ext/adapter/ext/ext-base.js')}" type="text/javascript"></script>
    <script src="${resource(plugin: 'extjs', file: 'ext/ext-all.js')}" type="text/javascript"></script>
    <link rel="stylesheet" href="${resource(dir: 'css', file: 'Ext.ux.form.LovCombo.css')}"/>
    <script src="${resource(dir: 'js', file: 'Ext.ux.form.LovCombo.js')}" type="text/javascript"></script>
    <title></title>

    <script type="text/javascript">
        var academicYearDataStore;
        var checkBoxSelectionModel;
        var academicYearEditorGrid;
        Ext.onReady(function(){

            academicYearDataStore =  new Ext.data.Store({
                url: '${createLink(controller: 'academicConfiguration',action: 'academicYearJsonData')}',
                reader: new Ext.data.JsonReader({
                    root: 'academicYearList',
                    totalProperty: 'totalCount',
                    id: 'id'
                },[
                    {name:'id',type:'string',mapping:'id'},
                    {name:'yearName',type:'string',mapping:'yearName'},
                    {name:'startTime',type:'string',mapping:'startTime'},
                    {name:'endTime',type:'string',mapping:'endTime'},
                    {name: 'createDate',type:'string',mapping:'createDate'},
                    {name: 'status',type:'string',mapping:'status'}

                ]),
                autoLoad : true
            });
            checkBoxSelectionModel= new Ext.grid.CheckboxSelectionModel();
            academicYearEditorGrid = new Ext.grid.EditorGridPanel({
                id: "academicYearEditorGrid",
                store : academicYearDataStore,
                selModel : checkBoxSelectionModel,
                clicksToEdit: 2,
                renderTo: "list_user",
                width: 950,
                height: 300,

                columns : [
                    {
                        dataIndex: 'id',
                        header: 'ID',
                        width: 60
                    },{
                        dataIndex: 'yearName',
                        header: 'Year Name',
                        width: 140
                    },{
                        dataIndex: 'startTime',
                        header: 'Start Time',
                        sortable: true,
                        width: 140
                    }
                    ,{
                        dataIndex: 'endTime',
                        header: 'End Time',
                        sortable: true,
                        width: 100
                    },{
                        dataIndex: 'createDate',
                        header: 'Create Date',
                        sortable: true,
                        width: 100
                    },{
                        dataIndex: 'status',
                        header: 'Status',
                        sortable: true,
                        width:100
                        %{--renderer: function(v, p, record) {--}%
                            %{--var renderText = renderText = "<img title='Pending' src='${resource(dir:'images',file: 'pending.png')}'/>";--}%
                            %{--var status = record.get('status');--}%
                            %{--if(status == 'Approved'){--}%
                                %{--renderText = "<img title='Approved' src='${resource(dir:'images',file: 'approved.png')}'/>"--}%
                            %{--}else if(status == 'Disapproved'){--}%
                                %{--renderText = "<img title='Disapproved' src='${resource(dir:'images',file: 'disapprove.png')}'/>"--}%
                            %{--}--}%

                            %{--return renderText;--}%
                        %{--}--}%
                    }

                ],
                stripeRows : true,
                bbar: new Ext.PagingToolbar({
                    store : academicYearDataStore,
                    pageSize : 10,
                    displayInfo : true,
                    displaymsg : 'Displaying {0} - {1} of {2}',
                    emptyMsg : "No records found"
                }),

                tbar: [{
                    xtype: "button",
                    text: "Create Academic Year",
                    iconCls: "addRecord" ,
                    handler:function(){
                        window.location="${createLink(controller: 'academicConfiguration',action: 'academicYearCreate')}"
                    }
                }]
            });
            academicYearDataStore.load({params: {start: 0, limit: 10}});

        });
    </script>
</head>
<body>
      <div id="list_user" name="list_user">

      </div>
</body>
</g:applyLayout>